<template>
<div>
  <div data-module="discover" data-sub="djradio" id="g_top" class="m-top">&nbsp;</div>
  <div id="g_nav" class="m-subnav">&nbsp;</div>
  <div class="g-bd" v-if="flag">
    <div class="g-wrap m-radio">
      <div class="rditype f-pr f-cb">
        <div class="boxes j-flag">
          <ul class="box f-cb z-show">
            <li v-for="(item , index) in catlist" :key="index" @click.stop="select_style = index" >
                <router-link :to="{path:'/home/discover/djradio' , query:{'id':item.id}}"   :class="{'z-sel':select_style == index}">
                  <div class="icon" :style="{background:'url('+item.picMacUrl+')'}"></div>
                  <em>{{item.name}}</em>
                </router-link>
            </li>
          </ul>
        </div>
      </div>
       <diantaiFilst v-if="!$route.query.id"></diantaiFilst>
       <diantaiLast v-if="$route.query.id"></diantaiLast>
    </div>
  </div>
  </div>
</template>

<script>
import {dj_catelist} from '../../../network/dj'

import diantaiLast from './diantai_last.vue'
import diantaiFilst from './diantai_ first.vue'
export default {
        data() {
                return {
                select_style:null,
                catlist:[] ,
                flag:true  
                }
        },
        components:{
            diantaiFilst,
            diantaiLast
        },
        methods:{ 
            retard(){
                this.flag = false
                this.$nextTick(() => {
                    this.flag = true
                })
            },
            res_djcatelist(){      //获取dj分类列表
                 dj_catelist().then(res => {
                      this.catlist = res.data.categories 
                      sessionStorage.catlist = JSON.stringify(this.catlist)   
                 }, err => {
                         console.log('dj分类列表获取失败')
                 })
            }
        },
        beforeRouteLeave(to, from, next){
            sessionStorage.removeItem("catlist")
            sessionStorage.removeItem("lastDj")
             next()
        },
        created(){
            if (sessionStorage.catlist) {
              this.catlist = JSON.parse(sessionStorage.catlist) 
              this.select_style = this.catlist.findIndex(item => {
                     return item.id == parseInt(this.$route.query.id)
              })
              console.log(this.select_style)
            }else{
                this.res_djcatelist()
            }
        }
};
</script>

<style scoped>
.m-top {
    position: relative;
    z-index: 910;
    height: 70px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;
}
.m-subnav {
    z-index: 90;
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
}
.g-bd {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.g-wrap {
  padding: 40px;
}
.m-radio .rditype {
  margin-bottom: 20px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.f-cb::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.m-radio .rditype .boxes {
  overflow: hidden;
  max-height: 194px;
}
.m-radio .rditype .box.z-show {
  display: block;
}
.m-radio .rditype ul {
  margin-left: -33px;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
header {
  padding: 0;
  margin: 0;
}
.m-radio .rditype li {
    float: left;
    margin: 0 0 25px 33px;
    font-size: 12px;
}
.m-radio .rditype a {
    background-image: url('https://s2.music.126.net/style/web2/img/index_radio/radio_bg.png?ed25d1146ff53bca08b9b3c1f05357fd');
    background-repeat: no-repeat;
}
.m-radio .rditype a:hover{
        background-position: 0px 0px;
}
.m-radio .rditype a.z-sel{
   background-position: -70px 0;
    color: #d35757;
}
.m-radio .rditype a {
    display: block;
    width: 70px;
    height: 70px;
    background-position: 0 9999px;
    text-align: center;
    color: #888;
}
.m-radio .rditype a.z-sel .icon{
    background-position: -65px -8px !important;
}
.m-radio .rditype .icon {
    width: 48px;
    height: 48px;
    margin: 2px auto 0;
    background-position: -5px -8px !important;
}
em, i {
    font-style: normal;
    text-align: left;
    font-size: inherit;
}
.m-radio .rditype a em {
    margin-top: -3px;
}
</style>